<template>
  <div class="Sub_Service">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <div class="top_box">
            <el-row style="margin:10px">
              <el-col :span="12" v-if="false">
                <span style="margin-right:10px">数据提供方式</span>
                <el-button size="mini" @click="Ytype(1)" :type="YYtype_a"
                  >源表</el-button
                >
                <el-button size="mini" @click="Ytype(2)" :type="YYtype_b"
                  >视图</el-button
                >
                <el-button size="mini" @click="Ytype(2)" :type="YYtype_b"
                  >WEB SER...</el-button
                >
              </el-col>
              <el-col :span="12">
                <el-input
                  style="width:50%;display:inline-block;margin-right:10px"
                  size="mini"
                  placeholder="请输入服务编码/名称查询"
                  v-model="val_d"
                ></el-input>
                <el-button size="mini" icon="el-icon-search" @click="getItem()"
                  >搜索</el-button
                >
                <el-button
                  size="mini"
                  icon="el-icon-plus"
                  @click="open"
                  v-if="false"
                  >新增服务</el-button
                >
              </el-col>
            </el-row>
            <el-row style="margin:10px">
              <el-col :span="24" v-if="false">
                <span style="margin-right:10px">业务模块</span>
                <el-button
                  size="mini"
                  @click="YMTT(0)"
                  :type="YWtype == 0 ? 'primary' : ''"
                >
                  全部
                </el-button>
                <el-button
                  :key="i"
                  v-for="(v, i) in ModuleItems_items"
                  size="mini"
                  @click="YMTT(i)"
                  :type="YWtype == i ? 'primary' : ''"
                  >{{ v }}</el-button
                >
              </el-col>
            </el-row>
          </div>
          <div
            class="main_box"
            style="margin:10px;overflow:auto"
            v-loading="isLoading"
          >
            <el-card
              class="box-card card_item"
              v-for="i in listItem"
              :key="i.id"
              style="width:11.6%;height:95px"
              @click.native="edit(i)"
            >
              <el-row>
                <el-col :span="4">
                  <el-switch
                    v-model="i.state == 'STARTED' ? true : false"
                    active-color="rgb(64,158,255)"
                    inactive-color="#ccc"
                    @change="swich_change(i, $event)"
                  >
                  </el-switch>
                  <!-- <i
                    v-if="i.state == 'PARTIALLY_STARTED'"
                    :style="i.state == 'STARTED' ? 'color:#409eff;font-size:32px;': i.state == 'STOPPED' ?'color:#ccc;font-size:32px': i.state == 'PARTIALLY_STARTED' ?'color:#cc9900;font-size:32px':''"
                    :class="i.state == 'STARTED' ? 'el-icon-open' : i.state == 'STOPPED' ?  'el-icon-turn-off': i.state == 'PARTIALLY_STARTED' ?  'el-icon-set-up':''"
                  ></i> -->
                </el-col>
                <el-col :span="20">
                  <div :title="i.name" class="card_item_name">{{ i.name }}</div>
                  <div :title="i.id" class="card_item_id">{{ i.id }}</div>
                </el-col>
              </el-row>
            </el-card>
          </div>
          <!-- 弹层 -->
          <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="45%"
            :before-close="handleClose"
            :append-to-body="true"
            :close-on-click-modal="false"
          >
            <el-form
              label-position="right"
              label-width="120px"
              :model="formLabelAlign"
            >
              <el-form-item
                label="服务类型"
                style="width:50%;display:inline-block"
              >
                <el-select
                  v-model="formLabelAlign.ServiceType"
                  placeholder="请选择"
                >
                  <el-option label="请求响应" :value="1"> </el-option>
                  <el-option label="发布订阅" :value="2"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="业务类型"
                style="width:50%;display:inline-block"
              >
                <el-select
                  v-model="formLabelAlign.BusinessType"
                  placeholder="请选择"
                >
                  <el-option label="字典" :value="1"> </el-option>
                  <el-option label="业务" :value="2"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="业务模块"
                style="width:50%;display:inline-block"
              >
                <el-select
                  v-model="formLabelAlign.BusinessModule"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(v, i) in ModuleItems_items"
                    :key="i"
                    :label="v"
                    :value="i - 0"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="服务代码"
                style="width:50%;display:inline-block"
              >
                <el-input v-model="formLabelAlign.Code"></el-input>
              </el-form-item>
              <el-form-item
                label="服务名称"
                style="width:50%;display:inline-block"
              >
                <el-input v-model="formLabelAlign.Name"></el-input>
              </el-form-item>
              <el-form-item
                label="服务英文名"
                style="width:50%;display:inline-block"
              >
                <el-input v-model="formLabelAlign.EnglishName"></el-input>
              </el-form-item>
              <el-form-item
                label="服务描述"
                style="width:50%;display:inline-block"
              >
                <el-input v-model="formLabelAlign.ServiceDesc"></el-input>
              </el-form-item>
              <el-form-item label="排序" style="width:50%;display:inline-block">
                <el-input v-model="formLabelAlign.Sort"></el-input>
              </el-form-item>
              <el-form-item
                label="版本号"
                style="width:50%;display:inline-block"
              >
                <el-input v-model="formLabelAlign.Version"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="btn_yes">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dialogVisible: false,
      formLabelAlign: [],
      page: {
        page: 1,
        limit: 999,
      },
      listItem: [],
      ModuleItems_items: {},
      title: "",
      YYtype_a: "",
      YYtype_b: "",
      FFtype_a: "",
      FFtype_b: "",
      YWtype: "",
      val_a: 0,
      val_b: 0,
      val_c: 0,
      val_d: "",
      isLoading: false,
    };
  },
  methods: {
    open() {
      // this.formLabelAlign.Id ? this.title = '修改' : this.title = '新增'
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.formLabelAlign = [];
    },
    btn_yes() {
      let url = this.formLabelAlign.Id
        ? "/ServiceManage/Update"
        : "/ServiceManage/Create";
      let body = this.formLabelAlign;
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.handleClose();
          this.getItem();
        } else if (res.code == -1) {
          this.$message.error(res.msg);
        }
      });
    },
    getItem() {
      this.isLoading = true
      this.$post("/ServiceManage/Subservice/List?" + "keyword=" + this.val_d).then(res => {
        if (res.code == 0) {
          this.listItem = res.data
          this.isLoading = false
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.isLoading = false
        }
      })
    },
    getModuleItems_items() {
      this.$get("/ServiceManage/ModuleItems").then((res) => {
        if (res.code == 0) {
          this.ModuleItems_items = res.data;
        }
      });
    },
    edit(val) {
      console.log(val);
      this.formLabelAlign = val;
      // this.open()
    },
    load() {
      this.page.page += 1;
      this.$post(
        "/ServiceManage/List?page=" +
          this.page.page +
          "&limit=" +
          this.page.limit +
          "&businessType=" +
          this.val_a +
          "&serviceType=" +
          this.val_b +
          "&businessModule=" +
          this.val_c +
          "&keyword=" +
          this.val_d
      ).then((res) => {
        if (res.code == 0 && res.data.list != null) {
          this.listItem.push(res.data.list);
        } else if (res.code == 0 && res.data.list == null) {
          // this.$message.warning('没有更多了');
        }
      });
    },
    Ytype(val) {
      this.page.page = 1;
      if (val == 1) {
        this.YYtype_b = "";
        this.YYtype_a == "primary"
          ? (this.YYtype_a = "")
          : (this.YYtype_a = "primary");
        this.YYtype_a == "primary" ? (this.val_a = 1) : (this.val_a = 0);
        this.getItem();
      }
      if (val == 2) {
        this.YYtype_b == "primary"
          ? (this.YYtype_b = "")
          : (this.YYtype_b = "primary");
        this.YYtype_a = "";
        this.YYtype_b == "primary" ? (this.val_a = 2) : (this.val_a = 0);
        this.getItem();
      }
    },
    Ftype(val) {
      this.page.page = 1;
      if (val == 1) {
        this.FFtype_b = "";
        this.FFtype_a == "primary"
          ? (this.FFtype_a = "")
          : (this.FFtype_a = "primary");
        this.FFtype_a == "primary" ? (this.val_b = 1) : (this.val_b = 0);
        this.getItem();
      }
      if (val == 2) {
        this.FFtype_b == "primary"
          ? (this.FFtype_b = "")
          : (this.FFtype_b = "primary");
        this.FFtype_a = "";
        this.FFtype_b == "primary" ? (this.val_b = 2) : (this.val_b = 0);
        this.getItem();
      }
    },
    YMTT(val) {
      this.page.page = 1;
      this.YWtype = val;
      this.val_c = val;
      this.getItem();
    },
    swich_change(val, i) {
      this.isLoading = true;
      console.log(val, i);
      let status = i ? 1 : 0;
      this.$post(
        "/ServiceManage/SubService/Status?id=" + val.id + "&status=" + status
      ).then((res) => {
        if (res.code == 0) {
          this.getItem();
          this.isLoading = false;
          this.$message({
            message: "操作成功",
            type: "success",
          });
        }else{
          this.isLoading = false;
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
  mounted() {
    // document.getElementById("2").focus();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getItem();
    this.getModuleItems_items();
  },
};
</script>
<style lang="scss" scoped>
.Sub_Service {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
  .card_item {
    display: inline-block;
    margin: 5px;
  }
  .main_box {
    text-align: none;
    height: 700px;
  }
  .card_item_name {
    padding: 0 10px 0 20px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .card_item_id {
    padding: 0 10px 0 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
